<template>
		<div class="shijiannengli">
			<div class="title">
			<svg  width="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path fill="rgb(98, 210, 162)" d="M384 192v640l384-320.064z"></path></svg>
			<span>实践能力</span></div>
			<el-menu mode="horizontal" background-color="rgb(215, 251, 233)" active-text-color="rgb(98, 210, 162)"
				text-color="rgb(98, 210, 162)" router default-active="experProject">
				<el-menu-item index="experProject">实验项目</el-menu-item>
				<el-menu-item index="keyPoint">实验目的</el-menu-item>
				<el-menu-item index="studyContent">实验要求</el-menu-item>
				<el-menu-item index="4">进度安排</el-menu-item>
				<el-menu-item index="5">思考练习</el-menu-item>
			</el-menu>
			<div class="card">
				<router-view></router-view>
			</div>
		</div>
</template>

<script>
	import {
		toRefs
	} from 'vue'
	export default {
		setup() {

		}
	}
</script>

<style lang="less" scoped>
	.title{
		padding-left: 2%;
		width: 100%;
		display: flex;
		 justify-content: flex-start;
		 align-items: center;
	}
	.shijiannengli {
		background-color: #d7fbe9;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.el-menu {
		display: flex;
		// display: -webkit-flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}

	// 去除菜单边框线
	.el-menu.el-menu--horizontal {
		border-bottom: #b4d7c5 solid 2px;
	}

	.is-active {
		border-bottom: 3px solid rgb(98, 210, 162);
	}

	.card {
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 2% 1% 2% 1%;
		width: 50%;
		border-radius: 15px;
		background-color: white;
		-webkit-box-shadow: #b4d7c5 0px 0px 10px;
		-moz-box-shadow: #b4d7c5 0px 0px 10px;
		box-shadow: #b4d7c5 0px 0px 10px;
	}
</style>
